/**
 * @desc:图片跳转链接以及图片配置
 * @img: zjf商品图片
 * @storeId： 门店id
 * @goodsId: 商品id
 * @width: 图片大小 数字或字符串，不要带px，只支持48*48 64*64 84*84
 * @size: 图片压缩比例
 * @type: 1是goodsid 直接跳转， 2是commid。需要请求goodsid再跳转
 * @isMask: 是否需要展示商品遮罩信息（下架，售罄）
 * @goodsState: 商品信息
 */

import React, { useState } from 'react';
import { message, Tooltip } from 'antd';
import { getSkuDetail } from '@/services/common';
import { formatZjfImg } from '@/utils/utils.jsx';
import CommonLoading from '@/components/CommonLoading';
import styles from './index.module.less';

//获取商品状态 商品状态 0下架，1正常，10违规（禁售）
const getMarkText = (width, goodsState, goodsStorage) => {
  const height = `${width}px`;

  const maskStyle = {
    width: height,
    height: height,
    textAlign: 'center',
    lineHeight: height,
    color: '#fff',
    background: 'rgba(0, 0, 0, 0.5)',
  };
  if (goodsState || goodsState == 0) {
    if (goodsState == 1) {
      if (goodsStorage == 0) {
        return <div style={maskStyle}>已售罄</div>;
      }
      return null;
    } else {
      return <div style={maskStyle}>已下架</div>;
    }
  } else {
    return null;
  }
};

const renderImg = (
  img,
  id,
  width,
  size,
  margin,
  isMask,
  goodsState,
  goodsStorage
) => {
  const src = formatZjfImg(img, id, size, width);
  return (
    <>
      <div
        className={`img-wrap img-wrap${width}`}
        style={{ backgroundImage: `url("${src}")`, margin }}
      >
        {isMask && getMarkText(width, goodsState, goodsStorage)}
      </div>
    </>
  );
};

export default ({
  img,
  storeId,
  goodsId,
  width = '48',
  size = '48x48',
  type = '1',
  margin = 0,
  isMask = false,
  goodsState,
  goodsStorage,
}) => {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    const res = await getSkuDetail({
      goodsCommonid: goodsId,
      pageSize: 1,
    });

    setLoading(false);
    if (res.success) {
      const { data } = res;
      if (data.length > 0) {
        const id = data[0].goodsId;
        window.open(`${GOODS_HREF}${id}`);
      } else {
        message.error('没有获取到商品id');
      }
    }
  };

  if (type == '1') {
    if (goodsId) {
      return (
        <a href={`${GOODS_HREF}${goodsId}`} target="_blank">
          {renderImg(
            img,
            storeId,
            width,
            size,
            margin,
            isMask,
            goodsState,
            goodsStorage
          )}
        </a>
      );
    } else {
      return renderImg(
        img,
        storeId,
        width,
        size,
        margin,
        isMask,
        goodsState,
        goodsStorage
      );
    }
  } else {
    return (
      <>
        <span
          onClick={handleClick}
          style={{ width: size, height: size, cursor: 'pointer' }}
        >
          {renderImg(
            img,
            storeId,
            width,
            size,
            margin,
            isMask,
            goodsState,
            goodsStorage
          )}
        </span>
        <CommonLoading loading={loading} />
      </>
    );
  }
};
